<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/goods/collect.css"/>
    <link rel="stylesheet" href="../css/mui.picker.min.css">
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
    <style>
        html,
        body,
        .mui-content {
            background-color: #ffffff;
        }

        .ptsp_top_stats {
            height: 20px;
            width: 100%;
            background-color: #ffffff;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
        }

        .mui-action-back {
            height: 44px;
            width: 44px;
        }

        .mui-action-back img {
            width: 100%;
        }

        .mui-bar-nav {
            top: 20px;
        }

        .mui-content {
            padding-bottom: 100px;
            padding-top: 64px !important;
        }

        .arr_left {
            background-image: url(../images/ptsp/left_arr_03.png);
            background-size: 24px 24px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .mui-title {
            font-size: 0.768rem;
        }

        .mui-bar-nav a {
            font-size: 0.5973rem;
            color: #888888;
            line-height: 44px;
        }

        .mui-bar-nav {
            top: 0;
        }

        .mui-content {
            padding-bottom: 100px;
            padding-top: 44px !important;
        }

        html,
        body {
            padding-top: 0;
        }
    </style>
</head>

<body>

<header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
    <a class="mui-action-back mui-icon  mui-pull-left arr_left">
    </a>
    <h1 class="mui-title"><span class="top_abv_active">商品收藏</span><span onclick="mui.openWindow('collect_content.html','collect_content.html')">内容收藏</span></h1>
    <a class="mui-pull-right  right_icon" onclick="coll.to_del()">
        <img src="../images/my_shan.png">
    </a>
</header>
<div class="mui-content">
    <div class="collect_list">

        <div :class="is_del|is_Del" v-for="(i,index) in list">
            <div :class="is_del|is_Del_icon_show"><i :class="i.is_checked?'del_active':''" @click="sel_del(index)"></i>
            </div>
            <div class="img fl"  @click="mui.openWindow('goods_detail.html?goodsid='+i.goodsid,'goods_detail.html')"><img :src="i.pic" alt=""></div>
            <div class="info"  @click="mui.openWindow('goods_detail.html?goodsid='+i.goodsid,'goods_detail.html')">
                <div class="title" v-html="i.name"></div>
                <div class="collect_num" v-html="i.favournum+'人收藏'"> </div>
                <div class="bottom_info">
                    <span class="price" style="color: #ff2626" v-html="'￥'+i.min_price"></span>
                    <!--<span class="add_car_btn" v-show="!is_del" @click="add_buy_car(event,index)">加入购物车</span>-->
                </div>
            </div>
        </div>


    </div>
    <transition name="slide-fade">
        <div class="bottom" v-show="is_del">
            <!--<span @click="sel_all_del">全选</span>-->
            <button class="btn_del" @click="to_do_del">确认删除</button>
        </div>
    </transition>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    mui.init()
    Vue.filter('is_Del', function (t) {
        if (t) {
            return 'collect_item delecting'
        } else {
            return 'collect_item'
        }
    })
    Vue.filter('is_Del_icon_show', function (t) {
        if (t) {
            return 'del_icon del_icon_show'
        } else {
            return 'del_icon '
        }
    })
    var coll = new Vue({
        el: '.mui-content',
        data: {
            is_del: false,
            user:'',
            list: [ 
            ],
            select_list:'',
        },
        methods: {
            to_del: function () {

                this.is_del ? this.is_del = false : this.is_del = true;
            },
            add_buy_car: function (e, index) {
                mui.toast("已将" + index + "号商品 加入购物车");
                e.target.innerHTML = '已加入购物车'
            },
            sel_del: function (index) {
                if (this.list[index].is_checked) {
//                  this.list[index].is_checked = false
                	Vue.set(this.list[index],'is_checked',false)
                    this.select_list.replace(this.list[index].colid + ",","")

                } else {
                	Vue.set(this.list[index],'is_checked',true)
                	this.select_list+=this.list[index].colid + ",";
//                  this.list[index].is_checked = true;

                }
                console.log(this.select_list)
            },
            sel_all_del: function () {
                for (var i = 0; i < this.list.length; i++) {
                    this.list[i].is_checked = true;
                }
            },
            to_do_del: function () {
                if (this.select_list == '' || this.select_list == null) {
                	mui.toast("请选择商品");
                	return false;
                } else{
                	$.ajax({
	                	type:"get",
	                	url:"https://zhapp.4hl.cn/api/collect/delecoll",
	                	data:{
	                		colid:this.select_list,type:1
	                	},
	                	success:function(res){
	                		console.log(res)
	                		mui.toast("删除成功");
	                		if(window.plus){
	                			plus.webview.currentWebview().reload();
	                		}
	                	}
	                });
                }
                
            }
        },
        mounted: function () {
        	var user = localStorage.getItem("user");
        	if(user){
        		user = JSON.parse(user)
        		this.user = user;
        	}
        	var that = this;
			$.ajax({
				type:"get",
				url:"https://zhapp.4hl.cn/api/collect/collectlists",
				data:{
					uid:this.user.uid,
					type:0
				},
				success:function(res){

					res = JSON.parse(res);
					console.log(res)
					if(res.code==1){
						that.list = res.data;
					}
				},
				error:function(){
					
				}
			});
        }
    })
</script>
</body>

</html>